<template>
	<div class="diseaseMain">
		<div class="searchBox">
			<el-card class="box-card" style="width: 480px;" >
				<el-input placeholder="搜索特定疾病" v-model="input">
					<el-button slot="append" icon="el-icon-search" @click="getOneDisease()"></el-button>
				</el-input>
			</el-card>
		</div>
		<!-- echarts展示 -->
		<div class="charts1" id="main" style="width: 1600px;height: 900px;"></div>
		<div style="padding-top: 25px;padding-bottom: 25px;">
			<el-button @click="prePage()">上一页</el-button>
			<el-button @click="echartsInit()">返回总览</el-button>
			<el-button @click="nextPage()">下一页</el-button>
		</div>
	</div>
</template>

<script>
	var echarts = require('echarts');
	export default {
		created() {
			this.echartsInit();
			// this.getDiseaseList();
		},
		data() {
			return {
				page: 1,
				size: 20,
				input: '',
				echartsTitle: "部分图谱",
				myChart:'',
				diseaseList: [],
				option: '',
				nodesList: [],
				nodesCheck: [],
				nodesDisease: [],
				nodesFood: [],
				nodesDrug: [],
				nodessymptom: [],
				nodesDepartment: [],
				relationship: [],
				DiseaseCategories: [{
					name: '疾病',
					itemStyle: {
						normal: {
							color: "#ffaa00",
						}
					}
				}, {
					name: '所属科室',
					itemStyle: {
						normal: {
							color: "#50a1f1",
						}
					}
				}, {
					name: '检查项目',
					itemStyle: {
						normal: {
							color: "#e9e90f",
						}
					}
				}, {
					name: '药物',
					itemStyle: {
						normal: {
							color: "#b40087",
						}
					}
				}, {
					name: '食物',
					itemStyle: {
						normal: {
							color: "#00aa7f",
						}
					}
				}, {
					name: '症状',
					itemStyle: {
						normal: {
							color: "#e0dccc",
						}
					}
				}]
			}
		},
		mounted() {
			document.title = "知识图谱"
		},
		methods: {
			prePage() {
				const _this = this;
				if (_this.page == 1) {
					alert("已经是第一页了")
					_this.page = 1;
				} else {
					_this.page = _this.page - 1;
				}
				_this.echartsInit();
			},
			nextPage() {
				const _this = this;
				_this.page = _this.page + 1;
				this.echartsInit();
			},
			// getDiseaseList() {
			// 	const _this = this;
			// 	this.$http.post('/disease/getSomeDisease?num=5')
			// 		.then(function(resp) {
			// 			console.log(resp);
			// 			_this.diseaseList = resp.data.data;
			// 		})
			// 		.catch(function(err) {
			// 			console.log(err);
			// 		});
			// },
			// echarts图初始化函数
			echartsInit() {
				const _this = this;
				if(_this.myChart != ''){
					_this.myChart.clear();
					_this.myChart.dispose();
				}
				var params = new URLSearchParams();
				params.append('page', _this.page);
				params.append('size', _this.size);
				this.$http.post('/disease/getSomeDisease', params).then(function(resp) {
					const respCode = resp.data.code;
					if (respCode == 405) {
						_this.$message.error('服务器错误');
					} else {
						const nodesDisease = resp.data.data.disease;
						const nodesDepartment = resp.data.data.department;
						const nodesCheck = resp.data.data.check;
						const nodesDrug = resp.data.data.drug;
						const nodesFood = resp.data.data.food;
						const nodessymptom = resp.data.data.symptom;
						const relationship = resp.data.data.relationships;
						const nodesList = [];
						for (let i = 0; i < nodesDisease.length; i++) {
							const diseaseArrary = nodesDisease[i].split("::")
							const tmp = {
								id: diseaseArrary[0],
								category: 0,
								name: diseaseArrary[1],
								symbolSize: 105,
								itemStyle: {
									normal: {
										show: true,
										color: "#ffaa00"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodesDepartment.length; i++) {
							const tmp = {
								category: 1,
								name: nodesDepartment[i],
								symbolSize: 95,
								itemStyle: {
									normal: {
										show: true,
										color: "#50a1f1"
									}
								}
							}
							nodesList.push(tmp);
						}

						for (let i = 0; i < nodesCheck.length; i++) {
							const tmp = {
								category: 2,
								name: nodesCheck[i],
								symbolSize: 89,
								itemStyle: {
									normal: {
										show: true,
										color: "#e9e90f"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodesDrug.length; i++) {
							const tmp = {
								category: 3,
								name: nodesDrug[i],
								symbolSize: 75,
								itemStyle: {
									normal: {
										show: true,
										color: "#b40087"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodesFood.length; i++) {
							const tmp = {
								category: 4,
								name: nodesFood[i],
								symbolSize: 60,
								itemStyle: {
									normal: {
										show: true,
										color: "#00aa7f"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodessymptom.length; i++) {
							const tmp = {
								category: 5,
								name: nodessymptom[i],
								symbolSize: 70,
								itemStyle: {
									normal: {
										show: true,
										color: "#e0dccc"
									}
								}
							}
							nodesList.push(tmp);
						}
						// 处理关系
						const links = []
						for (let i = 0; i < relationship.length; i++) {
							const relationshipArray = relationship[i].split("-*-")
							const tmp = {
								source: relationshipArray[0],
								target: relationshipArray[2],
								name: relationshipArray[1]
							}
							links.push(tmp)
						}
						const option = {
							title: {
								text: _this.echartsTitle
							},
							tooltip: {
								formatter: function(x) {
									return x.data.name;
								}
							},
							legend: {
								// x: "center",
								right: 0,
								align: "right",
								show: true,
								data: ["疾病", "所属科室", "检查项目", "药物", "食物", "症状"],
								orient: "vertical"
							},
							animationDuration: 1500,
							animationEasingUpdate: "quinticInOut",
							// animationDurationUpdate: 0,
							animation: false,
							// animationEasingUpdate: 'linear',
							series: [{
								type: 'graph',
								layout: 'force',
								symbolSize: 80,
								roam: true,
								label: {
									normal: {
										fontSize: 15,
										show: true,
									}
								},
								edgeSymbol: ['circle', 'arrow'],
								edgeSymbolSize: [4, 10],
								edgeLabel: {
									normal: {
										textStyle: {
											fontSize: 20
										}
									}
								},
								force: {
									repulsion: 3000, //斥力
									edgeLength: [200,240], //默认距离
									friction: 0.6,
									layoutAnimation: true
								},
								//能不能拖动
								draggable: true,
								lineStyle: {
									normal: {
										width: 4,
										color: '#000000',
										curveness: 0.2,
										length: 30
									}
								},
								edgeLabel: {
									normal: {
										show: true,
										formatter: function(x) {
											return x.data.name;
										}
									}
								},
								data: nodesList,
								links: links,
								categories: _this.DiseaseCategories
							}]
						}
						_this.option = option;
						_this.showGraph();
					}
				})
			},
			showGraph() {
				const _this = this;
				const graphShow = document.getElementById('main');
				_this.myChart = echarts.init(graphShow, 'light');
				_this.myChart.setOption(this.option);
				_this.myChart.on('click',function(param){
					// console.log(param);
					var leixing = param.data.category;
					var curName = param.data.name;
					if(leixing  == 0){
						_this.input = curName;
						_this.getOneDisease();
					}else{
						_this.getOneOther(leixing,curName);
					}

				})
			},
			getOneDisease(){
				const _this = this;
				var params = new URLSearchParams();
				params.append("name",_this.input);
				this.$http.post('/disease/oneDisease',params).then(function(resp){
					if(resp.data.code == 200){
						_this.myChart.clear();
						_this.myChart.dispose();
						const nodesDisease = resp.data.data.disease;
						const nodesDepartment = resp.data.data.department;
						const nodesCheck = resp.data.data.check;
						const nodesDrug = resp.data.data.drug;
						const nodesFood = resp.data.data.food;
						const nodessymptom = resp.data.data.symptom;
						const relationship = resp.data.data.relationships;
						const nodesList = [];
						for (let i = 0; i < nodesDisease.length; i++) {
							const diseaseArrary = nodesDisease[i].split("::")
							const tmp = {
								id: diseaseArrary[0],
								category: 0,
								name: diseaseArrary[1],
								symbolSize: 105,
								itemStyle: {
									normal: {
										show: true,
										color: "#ffaa00"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodesDepartment.length; i++) {
							const tmp = {
								category: 1,
								name: nodesDepartment[i],
								symbolSize: 95,
								itemStyle: {
									normal: {
										show: true,
										color: "#50a1f1"
									}
								}
							}
							nodesList.push(tmp);
						}
						
						for (let i = 0; i < nodesCheck.length; i++) {
							const tmp = {
								category: 2,
								name: nodesCheck[i],
								symbolSize: 89,
								itemStyle: {
									normal: {
										show: true,
										color: "#e9e90f"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodesDrug.length; i++) {
							const tmp = {
								category: 3,
								name: nodesDrug[i],
								symbolSize: 75,
								itemStyle: {
									normal: {
										show: true,
										color: "#b40087"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodesFood.length; i++) {
							const tmp = {
								category: 4,
								name: nodesFood[i],
								symbolSize: 60,
								itemStyle: {
									normal: {
										show: true,
										color: "#00aa7f"
									}
								}
							}
							nodesList.push(tmp);
						}
						for (let i = 0; i < nodessymptom.length; i++) {
							const tmp = {
								category: 5,
								name: nodessymptom[i],
								symbolSize: 70,
								itemStyle: {
									normal: {
										show: true,
										color: "#e0dccc"
									}
								}
							}
							nodesList.push(tmp);
						}
						// 处理关系
						const links = []
						for (let i = 0; i < relationship.length; i++) {
							const relationshipArray = relationship[i].split("-*-")
							const tmp = {
								source: relationshipArray[0],
								target: relationshipArray[2],
								name: relationshipArray[1]
							}
							links.push(tmp)
						}
						const option = {
							title: {
								text: _this.echartsTitle
							},
							tooltip: {
								formatter: function(x) {
									return x.data.name;
								}
							},
							legend: {
								// x: "center",
								right: 0,
								align: "right",
								show: true,
								data: ["疾病", "所属科室", "检查项目", "药物", "食物", "症状"],
								orient: "vertical"
							},
							animationDuration: 1500,
							animationEasingUpdate: "quinticInOut",
							// animationDurationUpdate: 0,
							animation: false,
							// animationEasingUpdate: 'linear',
							series: [{
								type: 'graph',
								layout: 'force',
								symbolSize: 80,
								roam: true,
								label: {
									normal: {
										fontSize: 15,
										show: true,
									}
								},
								edgeSymbol: ['circle', 'arrow'],
								edgeSymbolSize: [4, 10],
								edgeLabel: {
									normal: {
										textStyle: {
											fontSize: 20
										}
									}
								},
								force: {
									repulsion: 1000, //斥力
									edgeLength: 200, //默认距离
									friction: 0.6,
									layoutAnimation: true
								},
								draggable: false,
								lineStyle: {
									normal: {
										width: 4,
										color: '#000000',
										curveness: 0.2,
										length: 30
									}
								},
								edgeLabel: {
									normal: {
										show: true,
										formatter: function(x) {
											return x.data.name;
										}
									}
								},
								data: nodesList,
								links: links,
								categories: _this.DiseaseCategories
							}]
						}
						_this.option = option;
						_this.showGraph();
					}else{
						_this.$message.error({message:'未搜索到该疾病!',duration:500});
					}
				})
			},
			getOneOther(identity,name){
				const _this = this;
				var params = new URLSearchParams();
				params.append("identity",identity);
				params.append("name",name);
				this.$http.post('/common/otherNode',params).then(function(resp){
					if(resp.data.code == 200){
						_this.myChart.clear();
						_this.myChart.dispose();
						const nodesDisease = resp.data.data.disease;
						// const nodesDepartment = '';
						// const nodesCheck = '';
						// const nodesDrug = '';
						// const nodesFood = '';
						// const nodessymptom = '';
						const relationship = resp.data.data.relationships;
						const nodesList = [];
						for (let i = 0; i < nodesDisease.length; i++) {
							const diseaseArrary = nodesDisease[i].split("::")
							const tmp = {
								id: diseaseArrary[0],
								category: 0,
								name: diseaseArrary[1],
								symbolSize: 105,
								itemStyle: {
									normal: {
										show: true,
										color: "#ffaa00"
									}
								}
							}
							nodesList.push(tmp);
						}
						if(identity == 1){
							const nodesDepartment = resp.data.data.department;
							for (let i = 0; i < nodesDepartment.length; i++) {
								const tmp = {
									category: 1,
									name: nodesDepartment[i],
									symbolSize: 95,
									itemStyle: {
										normal: {
											show: true,
											color: "#50a1f1"
										}
									}
								}
								nodesList.push(tmp);
							}
						}else if(identity == 2){
							const nodesCheck = resp.data.data.check;
							for (let i = 0; i < nodesCheck.length; i++) {
								const tmp = {
									category: 2,
									name: nodesCheck[i],
									symbolSize: 89,
									itemStyle: {
										normal: {
											show: true,
											color: "#e9e90f"
										}
									}
								}
								nodesList.push(tmp);
							}
						}else if(identity == 3){
							const nodesDrug = resp.data.data.drug;
							for (let i = 0; i < nodesDrug.length; i++) {
								const tmp = {
									category: 3,
									name: nodesDrug[i],
									symbolSize: 75,
									itemStyle: {
										normal: {
											show: true,
											color: "#b40087"
										}
									}
								}
								nodesList.push(tmp);
							}
						}else if(identity == 4){
							const nodesFood = resp.data.data.food;
							for (let i = 0; i < nodesFood.length; i++) {
								const tmp = {
									category: 4,
									name: nodesFood[i],
									symbolSize: 60,
									itemStyle: {
										normal: {
											show: true,
											color: "#00aa7f"
										}
									}
								}
								nodesList.push(tmp);
							}
						}else if(identity == 5){
							const nodessymptom = resp.data.data.symptom;
							for (let i = 0; i < nodessymptom.length; i++) {
								const tmp = {
									category: 5,
									name: nodessymptom[i],
									symbolSize: 70,
									itemStyle: {
										normal: {
											show: true,
											color: "#e0dccc"
										}
									}
								}
								nodesList.push(tmp);
							}
						}
						// 处理关系
						const links = []
						for (let i = 0; i < relationship.length; i++) {
							const relationshipArray = relationship[i].split("-*-")
							const tmp = {
								source: relationshipArray[0],
								target: relationshipArray[2],
								name: relationshipArray[1]
							}
							links.push(tmp)
						}
						const option = {
							title: {
								text: _this.echartsTitle
							},
							tooltip: {
								formatter: function(x) {
									return x.data.name;
								}
							},
							legend: {
								// x: "center",
								right: 0,
								align: "right",
								show: true,
								data: ["疾病", "所属科室", "检查项目", "药物", "食物", "症状"],
								orient: "vertical"
							},
							animationDuration: 1500,
							animationEasingUpdate: "quinticInOut",
							// animationDurationUpdate: 0,
							animation: false,
							// animationEasingUpdate: 'linear',
							series: [{
								type: 'graph',
								layout: 'force',
								symbolSize: 80,
								roam: true,
								label: {
									normal: {
										fontSize: 15,
										show: true,
									}
								},
								edgeSymbol: ['circle', 'arrow'],
								edgeSymbolSize: [4, 10],
								edgeLabel: {
									normal: {
										textStyle: {
											fontSize: 20
										}
									}
								},
								force: {
									repulsion: 1000, //斥力
									edgeLength: 200, //默认距离
									friction: 0.6,
									layoutAnimation: true
								},
								draggable: false,
								lineStyle: {
									normal: {
										width: 4,
										color: '#000000',
										curveness: 0.2,
										length: 30
									}
								},
								edgeLabel: {
									normal: {
										show: true,
										formatter: function(x) {
											return x.data.name;
										}
									}
								},
								data: nodesList,
								links: links,
								categories: _this.DiseaseCategories
							}]
						}
						_this.option = option;
						_this.showGraph();
					}else{
						_this.$message.error({message:'未搜索到该节点相关',duration:500});
					}
				})
			}
		}
	}
</script>

<style>
	.box-card {
		display: flex;
		justify-content: center;
	}

	.diseaseMain {
		display: flex;
		flex-direction: column;
		align-content: space-around;
		flex-wrap: wrap;
	}

	.searchBox {
		display: flex;
		flex-direction: column;
		align-content: space-around;
		flex-wrap: wrap;
		padding-bottom: 20px;
	}

	.charts1 {
		box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .05);
		border: 1px solid #000
	}
</style>
